<script setup lang="ts">
import { getCreateList, getPaperAdd, getQuestionsList, getPaperList, getExamPage, getPaperInfo, getPaperEdit, getPaperDel, postTaskSend, messageInfoList } from "@/api/exam/index";
import { getUserPage } from "@/api/user";
import { PageList, examListQuery, queryExam } from "@/api/exam/types";
import type { FormInstance } from "element-plus";
import { UserPageVO } from "@/api/user/types";
import msgTable from "@/components/msgTable/index.vue";

// 图片域名
const imgUrl = ref(import.meta.env.VITE_APP_BASE_API);
const queryFormRef = ref(ElForm); // 查询表单
const loading = ref(false);
const total = ref(0);
const dialog = reactive<DialogOption>({
  visible: false,
});

const queryParams = reactive<examListQuery>({
  page: 1,
  page_size: 10,
});

const userList = ref<PageList[]>([]);

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getPaperList(queryParams)
    .then(({ data }) => {
      userList.value = data.data;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

// 表单
const ruleFormRef = ref<FormInstance>();
// 新增提交数据
let formData = reactive({
  id: "",
  title: "",
  image: "",
  difficulty: 1,
  url: "",
  tid: "",
  is_group: 1,
  is_show: 1,
  item_number: 0,
  single_number: 0,
  single_score: 0,
  many_number: 0,
  many_score: 0,
  judge_number: 0,
  judge_score: 0,
  total_score: 0,
  txamination_time: 0,
  single_arr: [],
  many_arr: [],
  judge_arr: [],
  type: 1,
  cate_id: '',
  grade: [
    {
      grade_name: "优秀",
      grade_standard: "91~100",
    },
    {
      grade_name: "良好",
      grade_standard: "81~90",
    },
    {
      grade_name: "合格",
      grade_standard: "71~80",
    },
    {
      grade_name: "不合格",
      grade_standard: "0~60",
    },
  ],
});

// 表单校验
const rules = reactive({
  stem: [{ required: true, message: "请输入題目", trigger: "blur" }],
});

// 打开弹窗
const hanldeOpenDialog = (id: any | null = null) => {
  if (id) {
    getPaperInfo({ id }).then(({ data }) => {
      dialog.visible = true;
      formData.id = data.id;
      formData.title = data.title;
      formData.difficulty = data.difficulty;
      formData.tid = data.tid;
      formData.is_group = data.is_group;
      formData.is_show = data.is_show;
      // formData.item_number = data.item_number;
      formData.single_number = data.single_number;
      formData.single_score = data.single_score;
      formData.many_number = data.many_number;
      formData.many_score = data.many_score;
      formData.judge_number = data.judge_number;
      formData.judge_score = data.judge_score;
      // formData.total_score = data.total_score;
      formData.txamination_time = data.txamination_time;
      formData.type = data.type;
      formData.grade = data.grade;
      formData.cate_id = data.cate_id;
      formData.url = imgUrl.value + data.image;
      formData.image = data.image;
      formData.single_arr = data.questions_single;
      formData.many_arr = data.questions_many;
      formData.judge_arr = data.questions_judge;
      singList.value = data.questions_single;
      multipleList.value = data.questions_many;
      judgeList.value = data.questions_judge;
    })
    dialog.title = "编辑";
  } else {
    dialog.visible = true;
    formData.url = '';
    formData.image = '';
    formData.single_arr = [];
    formData.many_arr = [];
    formData.judge_arr = [];
    formData.id = '';
    formData.title = '';
    formData.difficulty = 1;
    formData.tid = '';
    formData.is_group = 1;
    formData.is_show = 1;
    formData.single_number = 0;
    formData.single_score = 0;
    formData.many_number = 0;
    formData.many_score = 0;
    formData.judge_number = 0;
    formData.judge_score = 0;
    formData.txamination_time = 0;
    formData.type = 1;
    formData.cate_id = '';
    formData.grade = [
      {
        grade_name: "优秀",
        grade_standard: "91~100",
      },
      {
        grade_name: "良好",
        grade_standard: "81~90",
      },
      {
        grade_name: "合格",
        grade_standard: "71~80",
      }
    ]
    activeName.value = 'basic';
    dialog.title = "新增";
  }
};

// 关闭弹窗
const closeDialog = () => {
  ruleFormRef.value?.resetFields();
  console.log(111)
  setTimeout(() => {
    // dialog.visible = false;
  }, 1000)
};

// 新增选项
const addChoiceList = () => {
  if (formData.grade.length >= 10) {
    ElMessage.warning("选项不能超过10个");
    return;
  }
  formData.grade.push({ grade_name: "不合格", grade_standard: "0~60" });
};

// 删除选项
const hanldeDelChoice = (index: number) => {
  if (formData.grade.length <= 2) {
    ElMessage.warning("选项不能少于2个");
    return;
  }
  ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    formData.grade.splice(index, 1);
  });
};

// 删除list
const hanldeListDel = async (id: any | null = null) => {
  await ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",

  }).then(async () => {
    let res = await getPaperDel({ id: id }) as any;
    ElMessage.success(res.msg);
    handleQuery();
  }).catch(() => {
    ElMessage({
      type: "info",
      message: "已取消删除",
    });
  });;
}

// 提交参数
const handleSubmit = (formEl: FormInstance | undefined) => {
  formData.single_arr = singList.value.map((item: any) => {
    return item.id
  }) as any;
  formData.many_arr = multipleList.value.map((item: any) => {
    return item.id
  }) as any;
  formData.judge_arr = judgeList.value.map((item: any) => {
    return item.id
  }) as any;
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      if (dialog.title == "编辑") {
        getPaperEdit(formData).then((res) => {
          ElMessage.success("编辑成功");
          closeDialog();
          formEl.resetFields();
          handleQuery();
        });
      } else {
        getPaperAdd(formData).then((res) => {
          ElMessage.success("新增成功");
          closeDialog();
          formEl.resetFields();
          handleQuery();
        });
      }
    }
  })
};

// 获取返回图片地址
const updatepostUrl = (url: string) => {
  formData.url = imgUrl.value + url;
  formData.image = url;
};

const selectList = ref<PageList[]>([]);
const classList = ref<PageList[]>([]);
const dataInfo = () => {
  // 获取顶级分类
  getCreateList({}).then(({ data }) => {
    selectList.value = data;
  });

  getExamPage({}).then(({ data }) => {
    classList.value = data;
  })
};

// 计算总分数
formData.total_score = computed(() => {
  return (
    formData.single_number * formData.single_score +
    formData.many_number * formData.many_score +
    formData.judge_number * formData.judge_score
  );
}) as any;


// 计算总题数量
formData.item_number = computed(() => {
  return (
    formData.single_number +
    formData.many_number +
    formData.judge_number
  );
}) as any;

const activeName = ref("basic");
const tableList = ref<PageList[]>();
const dialogChoice = reactive({
  title: "关联试题",
  visible: false,
  list: [],
  type: 1
});

// 列表查询参数
const params = reactive<queryExam>({
  page: 1,
  page_size: 10,
  stem: "",
  pid: "",
});

// 点击打开弹窗
const hanldeAddChoice = (type: number) => {
  dialogChoice.visible = true;
  dialogChoice.type = type;
  getQuestionsList({
    question_type: type,
    ...params,
  }).then(({ data }) => {
    tableList.value = data.data;
  });
};

// 获取选中的数据
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}

// 单选数据
const singList = ref([]);
// 多选数据
const multipleList = ref([]);
// 判断数据
const judgeList = ref([]);
// 确认选素材id
const handleChoiceSubmit = () => {
  if (multipleSelection.value.length > 0) {
    dialogChoice.list = multipleSelection.value;
    dialogChoice.visible = false;
    if (dialogChoice.type === 1) {
      singList.value = multipleSelection.value;
    } else if (dialogChoice.type === 2) {
      multipleList.value = multipleSelection.value;
    } else if (dialogChoice.type === 3) {
      judgeList.value = multipleSelection.value;
    }
  } else {
    ElMessage.warning("请选择素材");
  }
}

// 向上移动
const moveItemUp = (array: any, index: number) => {

  if (index <= 0 || index >= array.length) {
    ElMessage.warning("第一条，无法向上移动");
    return; // 索引无效，无法向上移动
  }
  const temp = array[index];
  array[index] = array[index - 1];
  array[index - 1] = temp;
}

// 向下移动
const moveItemDown = (array: any, index: number) => {
  if (index < 0 || index >= array.length - 1) {
    ElMessage.warning("最后一条，无法向上移动");
    return; // 索引无效，无法向下移动
  }

  const temp = array[index];
  array[index] = array[index + 1];
  array[index + 1] = temp;
}

// 数据置顶
const moveItemTop = (array: any, index: number) => {
  if (index <= 0) {
    ElMessage.warning("已经是第一条，无法置顶");
    return; // 已经是第一条，无法置顶
  }

  const temp = array[index];
  array.splice(index, 1);
  array.unshift(temp);
}

// 关闭素材弹窗
const choiceDialog = () => {
  dialogChoice.visible = false;
}

let userInfo = reactive({
  visible: false,
  page: 1,
  page_size: 10,
  list: [],
  total: 0,
  id: ''
})

const userPageList = ref<UserPageVO[]>();

// 打开发送任务弹窗
const hanldeTask = (data: any, type: string) => {
  userInfo.id = data.id;
  if (type == 'all') {
    postTaskSend({
      user_id: [],
      test_id: data.id,
      type: 200
    }).then((res: any) => {
      ElMessage.success(res.msg);
    })
    return;
  }
  userInfo.visible = true;
  getUserPage(userInfo).then((res) => {
    userPageList.value = res.data.data;
    userInfo.total = res.data.total;
  })
}


const selectionId = ref([]);
const hanldeRelease = (val: any) => {
  selectionId.value = val.map((item: any) => item.id);
}

// 指定用戶發佈認爲
const hanldeConfirmRelease = () => {
  postTaskSend({
    user_id: selectionId.value,
    test_id: userInfo.id,
    type: 100
  }).then((res: any) => {
    ElMessage.success(res.msg);
  })
}

const closeReleaseDialog = () => {
  userInfo.visible = false;
}

// 点击打开
const msgData = reactive({
  visible: false,
  id: 0,
  title: ''
});

// 打开消息列表
const hanldeTaskList = (data: any) => {
  msgData.id = data.id;
  msgData.title = '成都考场 - ' + data.title;
  msgData.visible = true;
}


onMounted(() => {
  handleQuery(); // 初始化用户列表数据
  dataInfo();
});
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :lg="24" :xs="24">
        <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="名称" prop="title">
              <el-input v-model="queryParams.title" placeholder="输入名称" clearable style="width: 200px"
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="试卷分类" prop="tid">
              <el-tree-select value-key="id" placeholder="请输入课程分类" style="width: 200px" v-model="queryParams.tid"
                :props="{ children: 'child', label: 'title' }" :data="selectList" check-strictly
                :render-after-expand="false">
              </el-tree-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
              <el-button @click="resetQuery">
                <i-ep-refresh />
                重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <template #header>
            <div class="flex justify-between">
              <div>
                <el-button @click="hanldeOpenDialog()" type="success"><i-ep-plus />新增</el-button>
              </div>
            </div>
          </template>
          <el-table v-loading="loading" :data="userList">
            <el-table-column label="编号" align="center" prop="id" width="100" />
            <el-table-column label="名称" align="center" prop="title" />
            <el-table-column label="总题目" align="center" prop="item_number" />
            <el-table-column label="单选题目数量" align="center" prop="single_number" width="120" />
            <el-table-column label="多选题目数量" align="center" prop="many_number" width="120" />
            <el-table-column label="判断题目数量" align="center" prop="judge_number" width="120" />
            <el-table-column label="总分" align="center" prop="total_score" />
            <el-table-column label="难度" align="center" prop="difficulty" />
            <el-table-column label="考试时间（分）" align="center" prop="txamination_time" width="130" />
            <el-table-column label="是否显示" align="center" prop="is_show">
              <template #default="scope">
                <span>{{ scope.row.is_show == 1 ? '显示' : '隐藏' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="380">
              <template #default="scope">
                <el-button @click="hanldeOpenDialog(scope.row.id)" type="primary"
                  size="small"><i-ep-edit />编辑</el-button>
                <el-button @click="hanldeListDel(scope.row.id)" type="danger" size="small"><i-ep-delete />删除</el-button>
                <el-button @click="hanldeTaskList(scope.row)" type="primary" size="small">消息任务列表</el-button>

                <el-dropdown>
                  <span class="el-dropdown-link">
                    <el-button style="margin-left: 10px;" type="success" size="small">发送考试任务</el-button>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="hanldeTask(scope.row, 'all')">所有用户</el-dropdown-item>
                      <el-dropdown-item @click="hanldeTask(scope.row, 'specify')">指定用户</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

              </template>
            </el-table-column>
          </el-table>
          <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
            v-model:limit="queryParams.page_size" @pagination="handleQuery" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增修改弹窗 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" top="1%" width="60%" append-to-body @close="closeDialog">
      <el-tabs v-model="activeName" type="card" class="demo-tabs">
        <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
          <el-tab-pane label="基本设置" name="basic">
            <el-form-item label="名称" prop="title">
              <el-input v-model="formData.title" placeholder="请输入题目" />
            </el-form-item>
            <el-form-item label="考试分类" prop="tid">
              <el-tree-select value-key="id" placeholder="请输入课程分类" style="width: 200px" v-model="formData.tid"
                :props="{ children: 'child', label: 'title' }" :data="selectList" check-strictly
                :render-after-expand="false">
              </el-tree-select>
            </el-form-item>
            <el-form-item label="试卷类型" prop="type">
              <el-radio-group v-model="formData.type">
                <el-radio :value="1">试卷</el-radio>
                <el-radio :value="2">练习</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="插图">
              <single-upload @updatepostUrl="updatepostUrl" v-model="formData.url" type="image" />
            </el-form-item>
            <div class="flex">
              <el-form-item label="单选题数量" prop="single_number">
                <el-input v-model.number="formData.single_number" placeholder="请输入题目" />
              </el-form-item>
              <el-form-item label="每题分数" prop="single_score">
                <el-input v-model="formData.single_score" placeholder="请输入单选题每题分数" />
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="多选题数量" prop="many_number">
                <el-input v-model.number="formData.many_number" placeholder="请输入多选题数量" />
              </el-form-item>
              <el-form-item label="每题分数" prop="many_score">
                <el-input v-model="formData.many_score" placeholder="请输入多选题每题分数" />
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="判断题数量" prop="judge_number">
                <el-input v-model.number="formData.judge_number" placeholder="请输入判断题数量" />
              </el-form-item>
              <el-form-item label="每题分数" prop="judge_score">
                <el-input v-model="formData.judge_score" placeholder="请输入判断题每题分数" />
              </el-form-item>
            </div>
            <div class="flex">
              <el-form-item label="总题目" prop="item_number">
                <el-input disabled v-model="formData.item_number" placeholder="请输入总分数" />
              </el-form-item>
              <el-form-item label="总分数" prop="total_score">
                <el-input disabled v-model="formData.total_score" placeholder="请输入总分数" />
              </el-form-item>
              <el-form-item label="时长/分" prop="txamination_time">
                <el-input v-model="formData.txamination_time" placeholder="请输入试题总数" />
              </el-form-item>
            </div>
            <el-form-item label="试题难度" prop="difficulty">
              <el-rate size="large" v-model="formData.difficulty" style="height: 30px" />
            </el-form-item>
            <el-form-item label="分数等级">
              <div class="flex" style="width: 100%" v-for="(item, index) in formData.grade">
                <div class="flex mb-5">
                  <el-input clearable style="width: 200px" class="mr-10 flex-1" v-model="item.grade_name"
                    placeholder="请输入选项" />
                  <el-input clearable style="width: 200px" class="mr-10 flex-1" v-model="item.grade_standard"
                    placeholder="请输入选项" />
                </div>
                <div style="width: 100px">
                  <el-button @click="hanldeDelChoice(index)" v-if="index + 1 == formData.grade.length"
                    type="danger">删除选项</el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="flex">
                <el-button type="primary" @click="addChoiceList">新增选项</el-button>
                <span>（最多添加10个选项）</span>
              </div>
            </el-form-item>
            <el-form-item label="组题方式" prop="is_group">
              <el-radio-group v-model="formData.is_group">
                <el-radio :value="1">手动组题</el-radio>
                <el-radio :value="2">随机组题</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="考试状态" prop="name">
              <el-radio-group v-model="formData.is_show">
                <el-radio :value="1">显示</el-radio>
                <el-radio :value="2">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="题库选择" name="choice">
            <template v-if="formData.is_group == 2">
              <el-form-item label="考试分类" prop="cate_id">
                <el-tree-select value-key="id" placeholder="请输入课程分类" style="width: 200px" v-model="formData.cate_id"
                  :props="{ children: 'child', label: 'title' }" :data="classList" check-strictly
                  :render-after-expand="false">
                </el-tree-select>
              </el-form-item>
            </template>
            <template v-if="formData.is_group == 1">
              <el-form-item label="单选题：" prop="name">
                <el-button @click="hanldeAddChoice(1)" type="primary">选择单选试题</el-button>
              </el-form-item>
              <el-form-item label="题库展示：" prop="name">
                <el-table :data="singList" height="300">
                  <el-table-column label="排序" type="index" width="100" />
                  <el-table-column label="编号" align="center" prop="id" width="100" />
                  <el-table-column label="题干" align="center" prop="stem">
                  </el-table-column>
                  <el-table-column label="操作" fixed="right" align="center" width="280">
                    <template #default="scope">
                      <el-button @click="moveItemUp(singList, scope.$index)" type="primary" size="small">向上</el-button>
                      <el-button @click="moveItemDown(singList, scope.$index)" type="primary"
                        size="small">向下</el-button>
                      <el-button @click="moveItemTop(singList, scope.$index)" type="success" size="small">置顶</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item label="多选题：" prop="name">
                <el-button @click="hanldeAddChoice(2)" type="primary">选择多选试题</el-button>
              </el-form-item>
              <el-form-item label="题库展示：" prop="name">
                <el-table :data="multipleList" height="300">
                  <el-table-column label="排序" type="index" width="100" />
                  <el-table-column label="编号" align="center" prop="id" width="100" />
                  <el-table-column label="题干" align="center" prop="stem"></el-table-column>
                  <el-table-column label="操作" fixed="right" align="center" width="280">
                    <template #default="scope">
                      <el-button @click="moveItemUp(multipleList, scope.$index)" type="primary"
                        size="small">向上</el-button>
                      <el-button @click="moveItemDown(multipleList, scope.$index)" type="primary"
                        size="small">向下</el-button>
                      <el-button @click="moveItemTop(multipleList, scope.$index)" type="success"
                        size="small">置顶</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
              <el-form-item label="判断题：" prop="name">
                <el-button @click="hanldeAddChoice(3)" type="primary">选择判断试题</el-button>
              </el-form-item>
              <el-form-item label="题库展示：" prop="name">
                <el-table :data="judgeList" height="300">
                  <el-table-column label="排序" type="index" width="100" />
                  <el-table-column label="编号" align="center" prop="id" width="100" />
                  <el-table-column label="题干" align="center" prop="stem"></el-table-column>
                  <el-table-column label="操作" fixed="right" align="center" width="280">
                    <template #default="scope">
                      <el-button @click="moveItemUp(judgeList, scope.$index)" type="primary" size="small">向上</el-button>
                      <el-button @click="moveItemDown(judgeList, scope.$index)" type="primary"
                        size="small">向下</el-button>
                      <el-button @click="moveItemTop(judgeList, scope.$index)" type="success"
                        size="small">置顶</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </template>
          </el-tab-pane>
        </el-form>
      </el-tabs>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit(ruleFormRef)">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 获取 -->
    <el-dialog v-model="dialogChoice.visible" :title="dialogChoice.title" top="2%" width="50%" append-to-body
      @close="choiceDialog">
      <el-table :data="tableList" ref="multipleTableRef" height="300" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="编号" align="center" prop="id" width="100" />
        <el-table-column label="分类" align="center" prop="cate_title" />
        <el-table-column label="题干" align="center" prop="stem"></el-table-column>
        <el-table-column label="提型" align="center" prop="question_type">
          <template #default="scope">
            <span v-if="scope.row.question_type == 1">单选题</span>
            <span v-if="scope.row.question_type == 2">多选题</span>
            <span v-if="scope.row.question_type == 3">判断题</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="add_time" width="140" />
        <el-table-column label="难度" align="center" prop="difficulty" />
        <el-table-column label="排序" align="center" prop="sort" />
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleChoiceSubmit">确 定</el-button>
          <el-button @click="choiceDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 发送考试任务 -->
    <el-dialog v-model="userInfo.visible" title="发送考试任务" width="80%" @close="closeReleaseDialog">
      <el-table :data="userPageList" @selection-change="hanldeRelease">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column key="id" label="员工id" align="center" prop="id" width="100" />
        <el-table-column key="username" width="150" label="用户账号" align="center" prop="username" />
        <el-table-column label="员工姓名" width="150" align="center" prop="name" />
        <el-table-column label="电话号码" width="150" align="center" prop="phone" />
        <el-table-column label="社会单位" align="center" prop="unit_name" />
        <el-table-column label="角色名称" align="center" prop="role_name" />
        <el-table-column label="子商户" align="center" prop="full_name" />
        <el-table-column label="身份类型名称" align="center" prop="type_name" />
        <el-table-column label="创建时间" align="center" prop="update_time" />
      </el-table>

      <pagination v-if="total > 0" v-model:total="userInfo.total" v-model:page="userInfo.page"
        v-model:limit="userInfo.page_size" @pagination="handleQuery" />

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="hanldeConfirmRelease">发 布</el-button>
          <el-button @click="closeReleaseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="msgData.visible" :title="msgData.title" top="2%" width="80%" @close="closeReleaseDialog">
      <msgTable v-if="msgData.visible" :postId="msgData.id"></msgTable>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
.button-box {
  margin-bottom: 20px;
}

.el-dropdown-link:focus-visible {
  outline: none;
}
</style>
